﻿@{
    Layout = null;
    ViewBag.Title = "Login";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="@Url.Content("~/Assets/ico/favicon.png")">

    <title>PassManager - Please Login</title>

    <!-- Bootstrap core CSS -->
    <link href="@Url.Content("~/Assets/css/bootstrap.min.css")" rel="stylesheet">
    <link href="@Url.Content("~/Assets/css/jquery.mmenu.css")" rel="stylesheet">

    <!-- page css files -->
    <link href="@Url.Content("~/Assets/css/font-awesome.min.css")" rel="stylesheet">
    <link href="@Url.Content("~/Assets/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css")" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="@Url.Content("~/Assets/css/style.css")" rel="stylesheet">
    <link href="@Url.Content("~/Assets/css/add-ons.min.css")" rel="stylesheet">

    <style type="text/css">
        .qr-holder
        {
            margin: 0 auto;
            width: 160px;
            height: 160px;
            display: block;
            position: relative;
        }
            .qr-holder img
            {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -8px 0 0 -8px;
            }
    </style>
</head>
<body>
    <div class="container-fluid content">
        <div class="row">
            <div id="content" class="col-sm-12 full">
                <div class="row">
                    <div id="login-box-up" class="login-box visible">

                        <div class="header">
                            Login to PassManager
                       
                        </div>

                        <p>
                            <a class="btn btn-qrlogin" data-target="#login-box-qr"><span>Login via QRCode</span></a>
                        </p>

                        <div class="text-with-hr">
                            <span>or use your username</span>
                        </div>

                        <form class="form-horizontal login" action="@Url.Action("DoLoginOnWeb", "Authenticate")" method="post">

                            <fieldset class="col-sm-12">
                                <div class="form-group">
                                    <div class="controls row">
                                        <div class="input-group col-sm-12">
                                            <input type="text" class="form-control" id="username" name="username" placeholder="Username or E-mail" />
                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="controls row">
                                        <div class="input-group col-sm-12">
                                            <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
                                            <span class="input-group-addon"><i class="fa fa-key"></i></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="confirm">
                                    <input type="checkbox" name="remember" />
                                    <label for="remember">Remember me</label>
                                </div>

                                <div class="row">

                                    <button type="submit" class="btn btn-lg btn-primary col-xs-12">Login</button>

                                </div>

                            </fieldset>

                        </form>

                        <div class="clearfix"></div>



                    </div>

                    <div id="login-box-qr" class="login-box">

                        <div class="header">
                            Login to PassManager
                       
                        </div>

                        <p>
                            <a class="btn btn-userlogin" data-target="#login-box-up"><span>Login via username</span></a>
                        </p>

                        <div class="text-with-hr">
                            <span>or scan the QR code</span>
                        </div>

                        <div class="form-horizontal login">

                            <div class="col-sm-12">
                                <div class="qr-holder">
                                    <img id="img-login-qr" src="@Url.Content("~/Assets/img/5-121204193936.gif")" alt="LoginQR" />
                                </div>

                                <div class="row">

                                    <div class="alert alert-success col-xs-12">Please use mobile app to scan above QR code</div>

                                </div>

                            </div>

                        </div>

                        <div class="clearfix"></div>



                    </div>
                </div>
                <!--/row-->

            </div>

        </div>
        <!--/row-->

        @Html.Partial("Footer")

    </div>
    <!--/container-->


    <!-- start: JavaScript-->
    <!--[if !IE]>-->

    <script src="@Url.Content("~/Assets/js/jquery-2.1.1.min.js")"></script>

    <!--<![endif]-->

    <!--[if IE]>
	
		<script src="@Url.Content("~/Assets/js/jquery-1.11.1.min.js")"></script>
	
	<![endif]-->

    <!--[if !IE]>-->

    <script type="text/javascript">
        window.jQuery || document.write("<script src='@Url.Content("~/Assets/js/jquery-2.1.1.min.js")'>" + "<" + "/script>");
		</script>

    <!--<![endif]-->

    <!--[if IE]>
	
		<script type="text/javascript">
	 	window.jQuery || document.write("<script src='@Url.Content("Assets/js/jquery-1.11.1.min.js")'>"+"<"+"/script>");
		</script>
		
	<![endif]-->
    <script src="@Url.Content("~/Assets/js/jquery-migrate-1.2.1.min.js")"></script>
    <script src="@Url.Content("~/Assets/js/bootstrap.min.js")"></script>


    <!-- page scripts -->
    <script src="@Url.Content("~/Scripts/jquery.signalR-2.1.0.js")" type="text/javascript"></script>
    <script src="@Url.Content("/signalr/hubs")" type="text/javascript"></script>

    <!-- theme scripts -->
    <script src="@Url.Content("~/Assets/plugins/pace/pace.min.js")"></script>
    <script src="@Url.Content("~/Assets/js/jquery.mmenu.min.js")"></script>
    <script src="@Url.Content("~/Assets/js/custom.min.js")"></script>
    <script src="@Url.Content("~/Assets/js/core.min.js")"></script>

    <!-- inline scripts related to this page -->
    <script type="text/javascript">
        $(function () {
            $(document).on('click', '.login-box a[data-target]', function (e) {
                e.preventDefault();
                var target = $(this).data('target');
                $('.login-box.visible').removeClass('visible');//hide others
                $(target).addClass('visible');//show target
            });

            var hub = $.connection.authHub;

            hub.client.ShowQR = function () {
                $("#img-login-qr").attr('src', 'http://chart.apis.google.com/chart?cht=qr&chld=M|4&chs=160x160&chl=@HttpUtility.UrlEncode(ViewBag.QRToken)')
                .css("margin", "-80px 0 0 -80px");
            };

            hub.client.DoLogin = function () {
                var form = $("<form />");
                form.attr("action", "@Url.Action("DoLogin", "Authenticate")");
                form.attr("method", "POST");
                form.submit();
            };

            $.connection.hub.start().done(function () {
                hub.server.ready("@ViewBag.QRToken");
            });
        });
    </script>

    <!-- end: JavaScript-->

</body>
</html>
